<!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="UTF-8">
 		<title>Title</title>
<style>
* {
  line-height: 0; /* 相对于当前字体大小的倍数 */
}
</style>
 
 	</head>
 	<body>
 		<input type="file" id="files" name="files" />
 		<h2></h2>
 		<div id="list"></div>
 		<script>
 			document.getElementById('files').addEventListener('change', function(e) {
 				const file = e.target.files[0];
 				const reader = new FileReader();

 				reader.onload = function(e) {
 					const lines = e.target.result.split('\n');
					
					var weizhi_x = 3
					var weizhi_y = 10
					
 					var biaoji = 31
 					var container = document.getElementById('list');

 					lines.forEach(function(line) {
 						var data_list = line.split(" ");
 						var zuobiao_x = data_list[2];
 						var zuobiao_y = data_list[3];
 						if (biaoji != zuobiao_y) {
 							var br = document.createElement('br');
							
							
 							container.appendChild(br);
							// container.append("换行\n换行");
							// container.innerHTML += "第一行<br>\n第二行<br>";
 						}
						
						if(zuobiao_y%2!=0&&zuobiao_x==0){
							var img = document.createElement('img');
							// 设置图片的源地址
							img.src = './白色空白.png';
							// 设置图片的其他属性，如alt属性
							img.alt = '描述文本';
							
							img.style.width = '20px'; // 设置图片宽度为300像素
							img.style.height = '40px'; // 设置图片高度为200像素
							container.appendChild(img);								
						}
 						biaoji = zuobiao_y
 						var zuobiao_pic = "空白";
						
 						if (data_list.length > 4) {
 							zuobiao_pic = data_list[4]
 						}
						
						if (weizhi_x==zuobiao_x&&weizhi_y==zuobiao_y) {
							zuobiao_pic =  "自己";
						}
 						// 创建一个新的img元素
 						var img = document.createElement('img');
 						// 设置图片的源地址
 						img.src = './' + zuobiao_pic + '.png';
 						// 设置图片的其他属性，如alt属性
 						img.alt = '描述文本';
						
						img.style.width = '40px'; // 设置图片宽度为300像素
						img.style.height = '40px'; // 设置图片高度为200像素
 						container.appendChild(img);

 						console.log(line); // 处理每一行数据
 					});
 				};



 				reader.onerror = function(e) {
 					console.error('File could not be read! Code ' + e.target.error.code);
 				};

 				reader.onloadstart = function(e) {
 					console.log('Reading started');
 				};

 				reader.onloadend = function(e) {
 					console.log('Reading finished');
 				};

 				reader.readAsText(file, 'UTF-8');
 			});
 		</script>

 	</body>
 </html>
